<script setup>
import {onMounted, ref} from "vue";
import request from "@/assets/js/mobileRequest";

const onClickLeft = () => history.back();
const active = ref(3);

const orderCards = ref({});

onMounted(() => {
  let id = new URLSearchParams(location.search).get('orderId')
  console.log(id);
  request.get(BASE_URL + "/v1/order/select?orderId=" + id).then((response) => {
    if (response.data.code == 2000) {
      orderCards.value = response.data.data[0];
      if (orderCards.value.orderStatus == '待接单') {
        active.value = 0;
      } else if (orderCards.value.orderStatus == '进行中') {
        active.value = 1;
      } else if (orderCards.value.orderStatus == '异常订单') {
        active.value = 2;
      } else if (orderCards.value.orderStatus == '待评价') {
        active.value = 2;
      } else if (orderCards.value.orderStatus == '已完成') {
        active.value = 3;
      }else if (orderCards.value.orderStatus == '超时'){
        active.value = 0;
      }else if(orderCards.value.orderStatus == '未支付'){
        active.value = 0;
      }
      console.log(orderCards.value);
    }
  })
})
</script>

<template>
  <div style="background-color: #f7f8fa">
    <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-steps :active="active" style="text-align: left">
        <van-step v-if="orderCards.orderStatus == '未支付'">未支付</van-step>
        <van-step v-if="orderCards.orderStatus == '超时'">接单超时</van-step>
        <van-step>待接单</van-step>
        <van-step>进行中</van-step>
        <van-step v-if="orderCards.orderStatus == '异常订单'">异常订单</van-step>
        <van-step>待评价</van-step>
        <van-step>已完成</van-step>
      </van-steps>
    </van-cell-group>
    <van-cell-group style="text-align: left;">
      <van-cell title="订单描述" :label="orderCards.orderDescription">
      </van-cell>
    </van-cell-group>
    <br>
    <van-cell-group style="text-align: left;">
      <van-cell title="位置" style="font-weight: bold;"/>
      <van-steps direction="vertical" :active="1" size="middle">
        <van-step>
          <div>{{orderCards.startLocation+'-'+orderCards.detailedStartLocation }}</div>
          <div>{{ orderCards.creationTime }}</div>
        </van-step>
        <van-step>
          <div>{{ orderCards.endLocation+'-'+orderCards.detailedEndLocation }}</div>
          <div>{{ orderCards.endTime }}</div>
        </van-step>
      </van-steps>
    </van-cell-group>
    <br>
    <van-cell-group style="text-align: left;">
      <van-cell title="实付金额" style="font-weight: bold;"/>
      <van-cell title="订单价格" :value="'￥'+orderCards.orderPrice"/>
      <van-cell title="跑腿费" value="￥1.2"/>
      <van-cell title="合计" :value="'￥'+(parseInt(orderCards.orderPrice)+2.3)"/>
    </van-cell-group>
    <br>
    <van-cell-group style="text-align: left;">
      <van-cell title="订单信息" style="font-weight: bold;"/>
      <van-cell title="订单标题" :value="orderCards.orderTitle"/>
      <van-cell title="订单类型" :value="'校园派'+orderCards.orderType+'服务'"/>
      <van-cell title="订单号" :value="orderCards.orderId"/>
      <van-cell title="支付时间" :value="orderCards.creationTime"/>
    </van-cell-group>
    <van-button v-if="orderCards.orderStatus == '未支付'" type="primary" size="large" :to="'/pay?orderId='+orderCards.orderId">支付</van-button>
    <van-grid :border="false" v-if="orderCards.orderStatus == '待评价' || orderCards.orderStatus == '已完成' || orderCards.orderStatus == '异常订单'">
      <van-grid-item>
        <van-icon name="gold-coin-o" size="1.5em"/>
        <div>打赏骑手</div>
      </van-grid-item>
      <van-grid-item>
        <router-link :to="'/assess?orderId='+orderCards.orderId">
          <van-icon name="comment-o" size="1.5em"/>
          <div>评价</div>
        </router-link>
      </van-grid-item>
      <van-grid-item style="text-align: center;">
        <router-link :to="'/launchOrder?orderId='+orderCards.orderId">
          <van-icon name="add-o" size="1.5em"/>
          <div>再来一单</div>
        </router-link>
      </van-grid-item>
      <van-grid-item>
        <router-link :to="'/complain?orderId='+orderCards.orderId">
          <van-icon name="warn-o" size="1.5em"/>
          <div>投诉</div>
        </router-link>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<style scoped>

</style>